/** 基础 */
<template>
  <div class="base-configuration">
    <je-form-item :label="$t('baseConfiguration.flowName')" v-bind="validateInfos.name" name="name">
      <je-input v-model:value.trim="formState.name" />
    </je-form-item>
    <je-form-item
      :label="$t('baseConfiguration.bindingFuncName')"
      v-bind="validateInfos.funcName"
      name="funcName"
    >
      <je-grid-select
        v-model:value="formState.funcName"
        config-info="JE_CORE_FUNCINFO_DATAPERM,funcName~funcCode~funcId~tableCode~SY_PRODUCT_ID~SY_PRODUCT_CODE~SY_PRODUCT_NAME,FUNCINFO_FUNCNAME~FUNCINFO_FUNCCODE~JE_CORE_FUNCINFO_ID~FUNCINFO_TABLENAME~SY_PRODUCT_ID~SY_PRODUCT_CODE~SY_PRODUCT_NAME,S"
      />
    </je-form-item>
    <je-form-item :label="$t('baseConfiguration.auxiliaryFuncName')" name="attachedFuncNames">
      <je-grid-select
        v-model:value="formState.attachedFuncNames"
        config-info="JE_CORE_FUNCINFO_DATAPERM,attachedFuncNames~attachedFuncCodes~attachedFuncIds,FUNCINFO_FUNCNAME~FUNCINFO_FUNCCODE~JE_CORE_FUNCINFO_ID,M"
        :querys="[
          {
            code: 'JE_CORE_FUNCINFO_ID',
            type: '!=',
            value: formState.funcId,
            cn: 'and',
          },
          {
            code: 'FUNCINFO_TABLENAME',
            type: '=',
            value: formState.tableCode,
            cn: 'and',
          },
        ]"
        @beforeSelect="doBeforeSelect"
      />
    </je-form-item>
    <!-- <je-form-item v-bind="validateInfos.contentModule" name="contentModule">
      <template #label>
        <i class="conditionicon fas fa-question-circle" @click="clickIcon('contentModule')" />
        {{ $t('baseConfiguration.contextTemplate') }}
      </template>
      <je-input v-model:value.trim="formState.contentModule" />
    </je-form-item> -->
    <je-form-item
      :label="$t('baseConfiguration.flowType')"
      v-bind="validateInfos.processClassificationName"
      name="processClassificationName"
    >
      <je-select
        v-model:value="formState.processClassificationName"
        config-info="JE_WF_PROCESSTYPE,processClassificationName~processClassificationCode~processClassificationId,text~code~id,S"
      />
    </je-form-item>
    <je-form-item name="deploymentEnvironment">
      <template #label>
        <i
          class="conditionicon fas fa-question-circle"
          @click="clickIcon('deploymentEnvironment')"
        />
        {{ $t('baseConfiguration.deployEnvironment') }}
      </template>
      <je-select
        v-model:value="formState.deploymentEnvironment"
        config-info="JE_WF_DEVELOPSTATUS,deploymentEnvironment,code,S"
      />
    </je-form-item>

    <Explain
      v-if="explainType"
      :modal-context="modalContext"
      width="500px"
      @closEexplain="closEexplain"
    />
  </div>
</template>

<script>
  import { defineComponent, ref, reactive, watch } from 'vue';
  import { Form, Input, InputSelect, Modal, Select } from '@jecloud/ui';
  import { verifyData } from '@/helper/common';
  import { isEmpty } from '@jecloud/utils';
  import Explain from '@/components/explain/index.vue';

  const useForm = Form.useForm;
  export default defineComponent({
    name: 'BaseConfiguration',
    components: {
      JeFormItem: Form.Item,
      JeInput: Input,
      JeGridSelect: InputSelect.Grid,
      JeSelect: Select,
      Explain,
    },
    props: {
      processBasicConfig: {
        type: Object,
        default: () => {
          return {};
        },
      },
      wfId: {
        type: String,
        default: '',
      },
    },
    setup(props) {
      //表单数据
      const formState = ref(props.processBasicConfig);
      //主数据改变刷新数据
      watch(
        () => props.wfId,
        () => {
          formState.value = props.processBasicConfig;
        },
        { deep: true },
      );

      //字段校验规则
      const rulesRef = reactive({
        name: verifyData.name,
        funcName: [verifyData.required],
        /* contentModule: [verifyData.required], */
        processClassificationName: [verifyData.required],
      });
      const { validate, validateInfos } = useForm(formState, rulesRef, {
        onValidate: (...args) => {},
      });

      //附属功能 点击前校验是否弹出
      const doBeforeSelect = () => {
        if (isEmpty(formState.value.funcName)) {
          Modal.alert('请先选择绑定功能！', 'error');
          return false;
        }
      };

      //点击icon
      const modalContext = ref('');
      const explainType = ref(false);
      const clickIcon = (type) => {
        if (type == 'contentModule') {
          modalContext.value =
            '内容模版：适用于流程监控功能时候展示内容，可以使用表单字段组合成内容模板，且可以通过{字段编码}的形式，获取当前行数据的字段值，进行变量替换；例如：名称{USER_NAME}。';
        } else if (type == 'deploymentEnvironment') {
          modalContext.value =
            '部署环境：是用于流程部署时，根据部署环境处理流程相关数据；<br/><br/>研发环境：<br/> &nbsp;&nbsp;&nbsp;&nbsp;1、适用于软件项目开发阶段，线上禁用；<br/> &nbsp;&nbsp;&nbsp;&nbsp;2、研发环境流程发布后的版本号重新初始化为“1”，该工作流关联的业务流程数据会被清空，并且业务数据的流程状态变为“未启动”状态，注意：该数据清除后无法恢复。<br/><br/>实施环境：<br/>&nbsp;&nbsp;&nbsp;&nbsp;1、适用于用户生产线上环境，线上使用。<br/> &nbsp;&nbsp;&nbsp;&nbsp;2、当流程部署时，发布后的新版本会形成新的版本号，原有数据按照原有版本继续执行，新业务数据启动流程时，会按照最新的流程模型流转，不影响当前流程版本使用的业务数据。';
        }
        explainType.value = true;
      };

      //弹窗关闭回调
      const closEexplain = () => {
        explainType.value = false;
      };
      return {
        formState,
        validateInfos,
        validate,
        doBeforeSelect,
        clickIcon,
        explainType,
        closEexplain,
        modalContext,
      };
    },
  });
</script>
